<template>
	<!--pages/extend/index.wxml-->
	<view class="addPeopleBox">
		<cu-custom :bgColor="'bg-'+theme.backgroundColor" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">身份信息</block>
		</cu-custom>



		<view class="user-form">
			<view>
				<text>真实姓名</text>
				<input placeholder-style="color:var(--gray)" bindblur="userName" v-model.trim="peopleData.name"
					placeholder="用药人姓名" />
			</view>
			<view>
				<text>身份证号</text>
				<input maxlength="18" type="idcard" placeholder-style="color:var(--gray)" bindblur="useridCard"
					v-model.trim="peopleData.idCard" placeholder="药品使用人身份证号码" />
				<!-- <text class="round">{{peopleData.idCard}} 123123</text> -->
			</view>

		</view>
		<!-- 			<template>
					    <view>
					        <camera device-position="back" flash="off" @error="error" style="width: 100%; height: 300px;"></camera>
					        <button type="primary" @click="takePhoto">拍照</button>
					        <view>预览</view>
					        <image mode="widthFix" :src="src"></image>
					    </view>
					</template> -->
				<view class="push-img">
					<view class="photoText">请按正反面顺序拍照上传!</view>
					<view class="add-img-arr">
						<view class="img-arr" v-for="(item,index) in imgList" :key="index" @tap="ViewImage"
							:data-url="imgList[index]">
							<image :src="item.link"></image>
							<text class="cuIcon-close text-white bg-black close-btn" @tap.stop="DelImg"></text>
						</view>



						<view class="cuIcon-add add-img" @tap="ChooseImage"></view>
					</view>

				</view>
		<view @tap="sumbit" class="save">保存</view>
		<view class="blackMask" v-if="cameraFlag">
			<camera  device-position="back" flash="off" @error="error" style="width: 100%; height: 85%;"></camera>
			<view class="photoBtn" @click="takePhoto">拍照</view>
			<view class="closeBtn" @click="closePhoto">关闭</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import api from 'utils/api'
	export default {
		data() {
			return {
				theme: app.globalData.theme, //全局颜色变量
				peopleData: {
					name: '',
					idCard: '',
				},
				diseaseShow: '', //是否展示
				userId: '',
				imgList: [],
				cameraFlag:false,
				id:'',
			};
		},
		onLoad(options) {
			console.log(options,'999999999999999999999999999999999999999999999999999999999')
			if(options.id){
				this.id = options.id
				api.getMessage().then(res => {
					this.dataList = res.data
					this.peopleData.name = this.dataList.userName
					this.peopleData.idCard = this.dataList.idCard
					this.imgList.push(this.dataList.idPathFront)
					this.imgList.push(this.dataList.idPathBack)
					console.log(res,'我是身份列表')
				})
			}
		},
		mounted() {
			uni.getStorage({
				key: 'user_info',
				success: (res) => {
					this.userId = res.data.id
				},
			})
		},
		methods: {
			closePhoto(){
				this.cameraFlag = false
			},
			takePhoto() {
			    const ctx = uni.createCameraContext();
			    ctx.takePhoto({
			        quality: 'high',
			        success: (res) => {
			            // this.src = res.tempImagePath
			            this.imgList.push(res.tempImagePath)
			        }
			    });
				this.cameraFlag = false
			},
			ChooseImage() {
				this.cameraFlag = true
				return
			
			},
			ViewImage(e) {
				console.log(e,'我是909090')
				uni.previewImage({
					current: e.currentTarget.dataset.url,
					urls: this.imgList
				})
			},
			DelImg(e) {
				this.imgList.splice(e.currentTarget.dataset.index, 1)
				this.imgList = this.imgList
			
			},
			error(e) {
			    console.log(e.detail);
			},
			imgMethod(path){
				uni.uploadFile({
					url: 'https://mall.ljcds.cn/mallapi/ma/file/upload?fileType=image&dir=lijian/', //仅为示例，非真实的接口地址
					filePath: path,
					name: 'file',
					success(res) {
						let result = JSON.parse(res.data)
						console.log(result, '上传图片1成功')
							
					}
				})
			},
			sumbit() {
				console.log(this.peopleData.name,this.peopleData.idCard,'90909090')
				console.log(this.imgList,'listlistyyyy')
				if(this.id != ''){
					this.imgList.map((item)=>{
						this.imgMethod(item)
					})
					api.putMessage({
						// userId: this.userId,
						id:this.id,
						name: this.peopleData.name,
						idCard: this.peopleData.idCard,
					}).then(res => {
						if (res.code == 0) {
							uni.showToast({
								title: '修改成功',
								duration: 2000,
								icon: "none",
							})
							uni.$emit('people', '1')
							uni.navigateBack({
								delta: 1
							})
						}
					})
				}else{
					this.imgList.map((item)=>{
						this.imgMethod(item)
					})
					api.addMessage({
						// userId: this.userId,
						name: this.peopleData.name,
						idCard: this.peopleData.idCard,
					}).then(res => {
						if (res.code == 0) {
							uni.showToast({
								title: '新增成功',
								duration: 2000,
								icon: "none",
							})
							uni.$emit('people', '1')
							uni.navigateBack({
								delta: 1
							})
						}
					})
				}

			},

		}

	}
</script>

<style scoped lang="scss">
	.addPeopleBox {
		position: relative;
		width: 100%;
		height: 1332rpx;
		background-color: white;
	}

	page {
		background-color: var(--white);
	}

	.user-form>view {
		display: flex;
		border-bottom: 2rpx solid var(--ghostWhite);
		padding: 20rpx;
		align-items: center;
	}

	.user-form>view>text:nth-child(1) {
		font-size: 30rpx;
		color: var(--black);
		width: 120rpx;
		text-align: center;
	}

	.user-form>view>text:nth-child(3) {
		font-size: 24rpx;
		background: var(--grey);
		color: var(--white);
		text-align: center;
		height: 40rpx;
		line-height: 40rpx;
		padding: 0 14rpx;
		text-align: center;
		margin-left: 20rpx;
	}

	.user-form>view>input:nth-child(2) {
		font-size: 30rpx;
		color: var(--black);
		text-align: center;
		width: 450rpx;
		text-align: left;
		margin-left: 20rpx;
	}

	.people-history {
		display: flex;
		align-items: center;
		margin-left: 20rpx;
	}

	.people-history>text:nth-child(2) {
		margin-left: 10rpx;
	}

	.save {
		width: 700rpx;
		height: 80rpx;
		background-color: #e5432e;
		color: white;
		font-size: 30rpx;
		text-align: center;
		line-height: 80rpx;
		margin: 0 auto;
		margin-top: 50rpx;
		border-radius: 10rpx;
	}

	.ease-title {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		margin-top: -20rpx;
		justify-content: space-between;
	}

	.ease-title>text:nth-child(1) {
		font-size: 32rpx;
		font-weight: bold;
		color: var(--black);
	}

	.ease-title>text:nth-child(2) {
		font-size: 30rpx;
		color: var(--gray);
	}

	.ease-model {
		padding: 30rpx;
		justify-content: space-between;
	}

	.case-list-msg {
		max-height: 70vh;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
	}

	.ease-list {
		justify-content: space-between;
		align-items: center;
		height: 90rpx;
	}

	.ease-list checkbox {
		margin: 10rpx;
	}

	.ease-list>.flex {
		align-items: center;
	}

	.easeMsg {
		width: 100%;
		height: 140rpx;
		background: var(--ghostWhite);
		color: var(--black);
		text-align: left;
		box-sizing: border-box;
		padding: 20rpx;
		border-radius: 10rpx;
	}
	
	
	
	.push-img {
		margin-top: 20rpx;
		border-top: 2rpx solid #f1f1f1;
		padding-top: 20rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}
	
	.push-img>view:nth-child(1) {
		font-size: 26rpx;
	}
	
	.push-img>view:nth-child(2) {
		font-size: 22rpx;
		margin-top: 4rpx;
	}
	
	.img-arr {
		position: relative;
	}
	
	.add-img-arr {
		display: flex;
		flex-wrap: wrap;
	}
	
	.close-btn {
		position: absolute;
		right: 20rpx;
		top: 20rpx;
		opacity: .6;
		width: 40rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
	}
	
	.add-img-arr image {
		width: 130rpx;
		height: 130rpx;
		margin-right: 20rpx;
		margin-top: 20rpx;
	}
	
	.add-img {
		width: 130rpx;
		height: 130rpx;
		font-size: 50rpx;
		border: 4rpx solid var(--ghostWhite);
		border-radius: 8rpx;
		line-height: 130rpx;
		text-align: center;
		box-sizing: border-box;
		margin-top: 20rpx;
		border: 1rpx solid #f1f1f1;
	}
	
	.disease-list {
		height: 70vh;
		background: white;
		box-sizing: border-box;
		padding: 30rpx;
	}
	
	.model-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: -20rpx;
	}
	
	.model-title>text:nth-child(1) {
		font-size: 28rpx;
		font-weight: bold;
	}
	
	.model-title>text:nth-child(2) {
		font-size: 48rpx;
		padding: 20rpx;
		margin-right: -20rpx;
	}
	
	.search-form {
		display: flex;
		align-items: center;
		height: 60rpx;
		padding: 0 20rpx;
		text-align: left;
	}
	
	.search-form input {
		margin-left: 10rpx;
		width: 600rpx;
	}
	
	.list-disease {
		height: calc(70vh - 220rpx);
		margin-top: 20rpx;
	}
	
	.has-data {
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: 2rpx solid var(--ghostWhite);
		text-align: left;
	}
	
	.border-red {
		border: 2rpx solid var(--red) !important;
	}
	
	.no-data {
		border: none !important;
	}
	
	.no-data>view>text::after,
	.no-data>view>text::before {
		content: '"';
		color: var(--red);
	}
	
	.no-data>view {
		border: none !important;
	}
	
	.no-data>view:nth-child(1) {
		font-weight: bold;
	}
	
	.no-data>view:nth-child(2) {
		color: var(--grey);
		font-size: 22rpx;
	}
	
	.add-btn {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 120rpx;
		line-height: 120rpx;
		background-color: #FFF;
		display: flex;
		justify-content: flex-end;
	}
	
	.add-btn_box {
		background: #e53c43;
		color: white;
		font-size: 30rpx;
		text-align: center;
		width: 375rpx;
	}
	.blackMask{
		width: 100%;
		// height: 92%;
		height: 1050rpx;
		position: absolute;
		left: 0;
		top:120rpx ;
		z-index: 10;
	}
	.photoBtn{
		width: 90%;
		height: 100rpx;
		line-height: 100rpx;
		background: green;
		margin: 0 auto;
		color: white;
		font-size: 32rpx;
		text-align: center;
		margin-top:30rpx ;
		
		border-radius:10rpx;
	}
	.closeBtn{
		width: 90%;
		height: 100rpx;
		line-height: 100rpx;
		background: red;
		margin: 0 auto;
		color: white;
		font-size: 32rpx;
		text-align: center;
		margin-top:30rpx ;
		
		border-radius:10rpx;
	}
	.photoText{
		font-size: 32rpx;
		color: #333333;
	}
</style>
